<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-size: 0;
      }
      .box {
        width: 600px;
        height: 900px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
      }
      .box img {
        width: 600px;
        height: 900px;
      }
      #kzq {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="box" id="box">
      <div id="kzq">
        <img src="./轮播图img/1.jpg" alt="" />
        <img src="./轮播图img/2.jpg" alt="" />
        <img src="./轮播图img/3.jpg" alt="" />
        <img src="./轮播图img/4.jpg" alt="" />
        <img src="./轮播图img/5.jpg" alt="" />
        <img src="./轮播图img/6.jpg" alt="" />
        <img src="./轮播图img/7.jpg" alt="" />
        <img src="./轮播图img/8.jpg" alt="" />
        <img src="./轮播图img/9.jpg" alt="" />
        <img src="./轮播图img/1.jpg" alt="" />
      </div>
    </div>
  </body>
  <script>
    var box = document.getElementById("box");
    var kzq = document.getElementById("kzq");

    var time;

    var G = (box.clientWidth / 3000) * 10;
    var K = 0;

    function gd() {
      K++;
      var ls = -K * G;
      kzq.style.left = ls + "px";
      console.log(ls);
      if (-ls >= 600 * 9) {
        console.log("通过");
        K = 0;
        var ls = -K * G;
        kzq.style.left = ls + "px";
      }
    }
    gd();
    time = setInterval(function () {
      gd();
    }, 10);
  </script>
</html>
